import Vue from 'vue'
import App from './App.vue'
import Button from './components/button copy'
import Icon from './components/icon'
// import ButtonGroup from './components/button-group'
import Input from './components/input copy'
import Row from './components/row'
import Col from './components/col'
import Layout from './components/layout'
import Header from './components/header'
import Sider from './components/sider'
import Content from './components/content'
import Footer from './components/footer'
import Toast from './components/toast'
import Dialog from './components/dialog'

import plugin from './components/plugin.js'

import Tabs from './components/tabs'
import TabsItem from './components/tabs-item'
import TabsBody from './components/tabs-body'
import TabsHeader from './components/tabs-header'
import TabsPane from './components/tabs-pane'
import Popover from './components/popover'
import Collapse from './components/collapse'
import CollapseItem from './components/collapse-item'
import Switch from './components/switch'
import Radio from './components/radio'
import RadioGroup from './components/radio-group'
import Checkbox from './components/checkbox'
import CheckboxGroup from './components/checkbox-group'
import Form from './components/form'
import FormItem from './components/form-item'

import './assets/fonts/font.scss'

Vue.component('sy-button', Button)
Vue.component('sy-icon', Icon)
// Vue.component('sy-button-group', ButtonGroup)
Vue.component('sy-input', Input)
Vue.component('sy-row', Row)
Vue.component('sy-col', Col)
Vue.component('sy-layout', Layout)
Vue.component('sy-header', Header)
Vue.component('sy-sider', Sider)
Vue.component('sy-content', Content)
Vue.component('sy-footer', Footer)
Vue.component('sy-toast', Toast)
Vue.component('sy-tabs', Tabs)
Vue.component('sy-tabs-head', TabsHeader)
Vue.component('sy-tabs-body', TabsBody)
Vue.component('sy-tabs-pane', TabsPane)
Vue.component('sy-tabs-item', TabsItem)
Vue.component('sy-popover', Popover)
Vue.component('sy-collapse', Collapse)
Vue.component('sy-collapse-item', CollapseItem)
Vue.component('sy-dialog', Dialog)
Vue.component('sy-switch', Switch)
Vue.component('sy-radio', Radio)
Vue.component('sy-radio-group', RadioGroup)
Vue.component('sy-checkbox', Checkbox)
Vue.component('sy-checkbox-group', CheckboxGroup)
Vue.component('sy-form', Form)
Vue.component('sy-form-item', FormItem)

Vue.use(plugin)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

// 单元测试
// import chai from 'chai'
// 单元测试
// const expect = chai.expect
// {
//   const Constructor = Vue.extend(Button)
//   const vm = new Constructor({
//     propsData: {
//       icon: 'setting'
//     }
//   })
//   vm.$mount('#test')
//   const useElement = vm.$el.querySelector('use')
//   const href = useElement.getAttribute('xlink:href')
//   expect(href).to.eq('#i-setting')
//   vm.$el.remove()
//   vm.$destroy()
// }
// {
//   const Constructor = Vue.extend(Button)
//   const vm = new Constructor({
//     propsData: {
//       icon: 'setting',
//       loading: true
//     }
//   })
//   vm.$mount('#test')
//   const useElement = vm.$el.querySelector('use')
//   const href = useElement.getAttribute('xlink:href')
//   expect(href).to.eq('#i-loading')
//   vm.$el.remove()
//   vm.$destroy()
// }
// {
//   const div = document.createElement('div')
//   document.body.appendChild(div)
//   const Constructor = Vue.extend(Button)
//   const vm = new Constructor({
//     propsData: {
//       icon: 'setting'
//     }
//   })
//   vm.$mount(div)
//   const svg = vm.$el.querySelector('svg')
//   const { order } = window.getComputedStyle(svg)
//   expect(order).to.eq('1')
//   vm.$el.remove()
//   vm.$destroy()
// }
